<template>
	<el-container class="container">
		<el-header class="header">
			<div class="logo"></div>
		</el-header>
		<el-main class="main">
			<div class="info">
				<div class="limg"></div>
				<div class="rlogin">
					<div class="logo-box1" v-show="loginShow">
						<div class="grcode-icon1" @click="loginShows"></div>
						<h3>账号登陆</h3>
						<el-form :model="form" :rules="rules" ref="form" class="form">
							<el-form-item prop="username">
								<el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
							</el-form-item>
							<el-form-item prop="pass">
								<el-input v-model="form.pass" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
							</el-form-item>
							<div class="passno"><a href="#">忘记密码</a></div>
							<el-form-item>
								<el-button type="primary" class="button" @click="onSubmit(form)" :loading="is_login">立即登录</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div class="logo-box2" v-show="!loginShow">
						<div class="grcode-icon2" @click="loginShows"></div>
						<div class="grcode-icon3"></div>
						<h3>手机扫码 安全登陆</h3>
						
						<el-popover
						  placement="bottom"
						  :width="400"
						  trigger="hover"
						>
						  <template #reference>
						    <div class="qrcode">
						    	<qrcode-vue style="width: 8vw;height: 8vw;" class="img" level="H" :value="codeValue"> </qrcode-vue> 
						    </div>
						  </template>
							<el-input v-model="codeValue" prefix-icon="el-icon-s-order" placeholder="请输入用户名"></el-input>
						</el-popover>
						
						<div class="name">打开 <span>微信</span> 扫一扫登陆</div>
						<div class="name"><a href="#">密码登陆</a> | <a href="#">注册账号</a></div>
					</div>
				</div>
			</div>
		</el-main>
		<el-footer class="footer">
			云教务系统©2021 京ICP备17033472号-4
		</el-footer>
	</el-container>
</template>

<script>
	import QrcodeVue from 'qrcode.vue'
	export default {
		data() {
			return {
				form: {},
				loginShow: true,
				is_login: false,  // 点击登陆提示
				// codeValue: 'https://docs.qq.com/doc/DZUZXcW5ISFBLbFVX',
				codeValue: 'http://edu.90000p.com/#/login',
				rules:{
					username: [
						{ required: true, message: '请输入名称', trigger: 'blur' },
						{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
					],
					pass: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
					]
				}
			}
		},
		components: {
			QrcodeVue
		},
		methods: {
			loginShows() {
				this.loginShow = !this.loginShow
			},
			onSubmit(form) {
				this.is_login = true
				this.$refs.form.validate((valid) => {
					if(valid){
						this.axios.post('http://www.eshareedu.cn/edusystems/api/admin/checklogin', this.form).then(res => {
						this.is_login = false
							if(res.data.errCode == 10000){
								window.sessionStorage.setItem('title', res.data.data.campus[0].title)
								window.sessionStorage.setItem('token', res.data.data.token)
								this.$message.success('登陆成功')
								this.$router.push('/home')
							}else{
								this.is_login = false
								return this.$message.error('账号或密码错误')
							}
						})
					}else{
						this.is_login = false
						return this.$message.info('请输入账号密码')
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;

		.header {
			display: flex;
			align-items: center;

			.logo {
				width: 255px;
				height: 50px;
				background: url(../assets/login/logo.png) no-repeat;
				background-size: 100%;
			}
		}

		.main {
			background-color: #eee;
			display: flex;
			justify-content: center;
			align-items: center;

			.info {
				width: 80vw;
				height: 30vw;
				min-width: 1050px;
				min-height: 400px;
				display: flex;
				justify-content: space-between;

				.limg {
					display: flex;
					flex: 2;
					height: 100%;
					margin-right: 1vw;
					background: url(../assets/login/loginindex.jpg) no-repeat;
					background-size: 100%;
				}

				.rlogin {
					display: flex;
					flex: 1;
					height: 100%;
					background-color: white;
					box-sizing: border-box;
					position: relative;

					h3 {
						width: 100%;
						height: 50px;
						line-height: 50px;
						text-align: center;
						font-size: 28px;
					}

					.logo-box1 {
						width: 80%;
						height: 80%;
						margin: auto;

						.form>* {
							margin-top: 4%;
						}

						.grcode-icon1 {
							width: 50px;
							height: 50px;
							background: url(../assets/login/qrcode_icon1.png) no-repeat;
							background-size: 100%;
							position: absolute;
							top: 10px;
							right: 10px;
						}

						.passno {
							display: flex;
							flex-direction: row-reverse;
						}

						.button {
							width: 100%;
						}
					}

					.logo-box2>* {
						margin-bottom: 10%;
					}

					.logo-box2 {
						width: 80%;
						height: 80%;
						margin: auto;

						.grcode-icon2 {
							width: 50px;
							height: 50px;
							background: url(../assets/login/qrcode-icon2.png) no-repeat;
							background-size: 100%;
							position: absolute;
							top: 10px;
							right: 10px;
						}

						.grcode-icon3 {
							width: 124px;
							height: 20px;
							background: url(../assets/login/passimg.png) no-repeat;
							background-size: 100% 100%;
							position: absolute;
							top: 10px;
							right: 60px;
						}

						.qrcode {
							display: flex;
							justify-content: center;
						}

						.name {
							text-align: center;

							span {
								color: blue;
							}
						}
					}
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>